<template>
    <div>
        <commpVxeTable
        :key="refreshTable"
        ref="headmanVxeTable"
        :config="config" 
        :columns="columnsVxe" 
        :formItem="formItem"
        :conditionBtnRow="true"
        :searchType="true"
        @checkboxChange="checkboxChange"
        > 
            <template v-slot:externalOperations="{data}">
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" icon="plus" @click="addPlan">添加计划</a-button>
                    </template>
                </vxe-form-item>
                <!-- <vxe-form-item>
                    <template>
                        <a-button class="red-btn" type="primary" icon="delete" @click="deletePlan">删除计划</a-button>
                    </template>
                </vxe-form-item> -->
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" icon="edit" @click="handlePlan(row)">办理</a-button>
                    </a-form-item>
                    <a-form-item v-if="row.fjhzt == '计划完成'">
                        <a-button class="green-btn" type="primary" icon="eye" @click="viewPlan(row)">查看</a-button>
                    </a-form-item>
                    <a-form-item v-if="row.fjhzt !== '计划完成'">
                        <a-button class="red-btn" type="primary" icon="delete" @click="deletePlan(row)">删除</a-button>
                    </a-form-item>
                </a-form> 
            </template>
        </commpVxeTable>
        <handle ref="handleRef" @handlePlan="handlePlan" @refreshTableChange="refreshTableChange" />
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import {
    jcylxjhqueryById,
    jcylxjhdeleteLxjh,
} from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import handle from './handle.vue'
export default {
    components:{
        commpVxeTable,
        handle,
    },
    props:{

    },
    data(){
        return{
            refreshTable:null,
            config:{
                api: assessCheckApi.jcylxjhpageList,
                rowId: 'id',
                paramet:{
                }
            },
            formItem:[{
                label: '关键字',
                model: 'gjz',
                searchType:'展开',
            },{
                label: '年度',
                model: 'fjhnd',
                interval:true,
                type:'datePicker',
                format:'YYYY',
                searchType:'收起',
            },{
                label: '审评类型',//(检查员登记类别)字典
                model: 'fjhcjlb',
                type:'Select',
                dictionaryType:'检查员登记类别',
                searchType:'收起',
            },{
                label: '计划名称',
                model: 'fjhmc',
                searchType:'收起',
                interval:true,
            },{
                label: '计划状态',
                model: 'fjhzt',
                placeholder: '计划状态',
                type:'Select',
                dictionaryType:'审评员遴选计划状态',
                searchType:'收起',
                interval:true,
            },{
                label: '发文编号',
                model: 'ffwbh',
                searchType:'收起',
                interval:true,
            }],
            columnsVxe:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '年度', //列头显示文字
                field: 'fjhnd',
                width: 70 ,
                titleInterval:true,
                slots: {
                    header:'fjhnd_header',
                }
            },{
                title: '计划名称', //列头显示文字
                field: 'fjhmc',
                //sortable:true,//排序
            },{
                title: '发文编号', //列头显示文字
                field: 'ffwbh',
            },{
                title: '审评类型', //列头显示文字
                field: 'fjhcjlb',
            },{
                title: '计划遴选人数', //列头显示文字
                field: 'fjhcjrs',
                width:107,
            },{
                title: '入选人数', //列头显示文字
                field: 'fsjcjrs',
                width:80,
            },{
                title: '计划状态', //列头显示文字
                field: 'fjhzt',
                width:80,
            },{
                title: '计划完成时间', //列头显示文字
                field: 'flxwcsj',
                width:165,
                
            },{
                title: '操作',
                field: 'id',
                titleInterval:true,
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                    header:'operation_header',
                },
                width:180,
            }],
            stepList:['计划起草','报名审核','培训管理','培训考核','确认名单','计划完成'],
            selectItem:[],
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        checkboxChange(rowList){
            rowList.forEach(item=>{
                this.selectItem.push(item.id)
            })
        },
        refreshTableChange(val){
            if(val){
                //重置表格--用在添加
                this.refreshTable = Date.now()
            }else{
                this.$refs.headmanVxeTable.searchEvent()
            }
        },
        addPlan(){
            this.$refs.handleRef.getData({currentSteps:0,formState:{},view:false})
            this.$refs.handleRef.visible = true
        },
        deletePlan(row){
            let that = this
            // if(this.selectItem.length){
                this.$confirm({
                    title:'您确认删除吗？',
                    // icon: createVNode(ExclamationCircleOutlined),
                    onOk() {
                        jcylxjhdeleteLxjh({ids:row.id}).then(res=>{
                            if(res.code == 200){
                                that.$message.success(res.message)
                                that.refreshTableChange(true)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            // }else{
            //     this.$message.warning('请先选择删除项')
            // }
        },
        handlePlan(row,val){
            //console.log(row,55)
            if(val){
                jcylxjhqueryById({id:row.id}).then(res=>{
                    if(res.code == 200){
                        this.$refs.handleRef.visible = true
                        this.$refs.handleRef.getData({currentSteps:this.stepList.indexOf(res.result.fjhzt),formState:res.result,view:false})
                        
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                this.$nextTick(()=>{
                    this.$refs.handleRef.visible = true
                    this.$refs.handleRef.getData({currentSteps:this.stepList.indexOf(row.fjhzt),formState:row,view:false})
                })
                
            }
        },
        viewPlan(row){
            this.$refs.handleRef.getData({currentSteps:this.stepList.indexOf(row.fjhzt),formState:row,view:true})
            this.$refs.handleRef.visible = true
        },
    }
}
</script>